<template>
	<view class="head">
		<view class="background">
			<image src="../../static/商城背景.png" />
			<view class="balance">
				余额：
				{{ remain_star }}
				<image src="/static/星星.png" />
			</view>
			<view class="search">
				<image src="../../static/搜索.png" />
				<input type="text" placeholder="搜索爱心物品" v-model="keyword" />
			</view>
			<view class="tab-bar">
				<view class="tab-item" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">
					<span :class="{ 'blue-text': activeTab === 'home' }">首页</span>
				</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'clothing' }" @click="activeTab = 'clothing'">
					<span :class="{ 'blue-text': activeTab === 'clothing' }">衣服</span>
				</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'stationery' }"
					@click="activeTab = 'stationery'">
					<span :class="{ 'blue-text': activeTab === 'stationery' }">文具</span>
				</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'toys' }" @click="activeTab = 'toys'">
					<span :class="{ 'blue-text': activeTab === 'toys' }">玩具</span>
				</view>
				<view class="tab-item" :class="{ 'active': activeTab === 'books' }" @click="activeTab = 'books'">
					<span :class="{ 'blue-text': activeTab === 'books' }">书籍</span>
				</view>
			</view>
		</view>
		<view class="sort">
			<view class="sort-item">
				<text>分值预览：</text>
			</view>
			<view class="sort-item">
				<img src="../../static/星级分类1.png" />
			</view>
			<view class="sort-item">
				<img src="../../static/星级分类2.png" />
			</view>
			<view class="sort-item">
				<img src="../../static/星级分类3.png" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		computed: {
		    ...mapState(['remain_star'])
		},
		name: "shopHead",
		data() {
			return {
				activeTab: null,
			}
		},
		methods: {},
	}
</script>

<style lang="scss">
	.head {
		width: 380px;
		height: 220px;
		margin: 0upx 0upx;
		padding: 0upx 0upx;
		background-color: #fff;
		margin: auto;
		border-radius: 5%;

		.background {
			display: flex;
			width: 380px;
			height: 170px;

			image {
				position: absolute;
				width: 380px;
				height: 170px;

			}

			.balance {
				position: absolute;
				margin: 20upx 80upx;
				color: white;
				font-size: 17px;

				image {
					// position: absolute;
					width: 20px;
					height: 20px;
				}
			}

			.search {
				position: absolute;
				width: 315px;
				display: flex;
				align-items: center;
				margin: 70upx 60upx;
				background-color: white;
				text-align: center;
				border-radius: 10rpx;

				image {
					// position: absolute;
					margin: 0upx 15upx;
					width: 25px;
					height: 25px;

				}

				input {
					flex: 1;
					border: 2rpx solid #000;
					padding: 15rpx;
					margin-right: 0rpx;
					border-radius: 10rpx;
				}
			}

			.tab-bar {
				position: absolute;
				display: flex;
				height: 50px;
				padding: 150upx 30upx;
				box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);

				.tab-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0upx 37upx;
					cursor: pointer;
				}

				.tab-item:hover {
					text-decoration: underline;
				}

				.blue-text {
					color: blue;
					text-decoration: underline;
				}
			}
		}

		.sort {
			position: absolute;
			display: flex;
			width: 350px;
			padding: 0upx 30upx;

			.sort-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				image {

					width: 70px;
					height: 40px;

				}
			}
		}
	}
</style>